<template>
  <div class="mv-list">
    <div class="mv-maininfo" v-for="(item,index) in data" :key="index">
      <div class="mv-img">
        <img v-lazy="item.cover ? item.cover : item.coverUrl" alt="">
      </div>

      <div class="mv-info">
        <div class="mv-name">
          <span>{{ item.name ? item.name : item.title }}</span>
        </div>
        <div class="mv-desc">
          <span>{{ item.artistName ? item.artistName : item.creator[0].userName }}</span>
          <span>{{ formatData(item.playCount ? item.playCount : item.playTime) }}万播放</span>
        </div>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20"
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data:Array,
      totalCount:Number,
    },

    data() {
      return {
        currentPage:1
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pageChange',val);
      },

      formatData(value){
        let result = (value / 1000).toFixed(1);
        return result;
      }
    }
  }
</script>

<style scoped>
.mv-list{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.mv-maininfo{
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.mv-img{
  margin-right: 10px;
}

.mv-img img{
  width: 170px;
  height: 100px;
  border-radius: 5px;
}

.mv-desc{
  display: flex;
  flex-direction: column;
}

.mv-desc span{
  font-size: 12px;
}
</style>